/*
 * @Author: jiu yin
 * @Date: 2024-05-07 14:09:35
 * @LastEditTime: 2024-06-05 17:27:30
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\scene_member_code\component\pico_modal.tsx
 * jiu
 */
import pico from "@/assets/image/pico.png";
import Modal_edit from "@/comment/modal_edit";
import type { ActionType } from "@ant-design/pro-components";
import { ProTable } from "@ant-design/pro-components";
import { ConfigProvider, Popover, message } from "antd";
import { useRef, useState } from "react";

import { add_device_in, list_device } from "@/api/home";
import "./index.scss";

export default function PicoList(props: any) {
	let { isModalOpen, detail_item } = props;
	const actionRef = useRef<ActionType>(null);
	const [radio_value, set_radio_value] = useState();
	const columns = [
		{
			dataIndex: "index",
			valueType: "indexBorder",
			width: 48,
		},
		{
			title: "手动关联设备",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => (
				<div className="flex items-center  font-700">
					<img src={pico} alt="" className="w-72px h-72px " />
					<div className="ml-12px">
						<p className="c-#161940 font-700 text-14px">{item.device_name}</p>
						<p className=" c-#5C5F7A text-14px">sn：{item.device_real_sn}</p>
					</div>
				</div>
			),
		},
		{
			title: "状态",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => (
				<div className="pico flex justify-end items-center gap-10px font-700">
					<i className="i2"></i>
					<i className="i3"></i>
					{item.battery} %
				</div>
			),
		},
	];

	const handleOk = async () => {
		if (!radio_value) return message.error("请选择关联设备");
		let params = { program_id: detail_item.program_id, member_id: detail_item.member_id, device_sn: radio_value };
		await add_device_in(params);
		message.success("关联设备成功");
		isModalOpen[1](false);
		props.reload();
	};

	let content = (
		<div className="c-#161940">
			1.前往【设置】-【网络】，将 MR 设备与电脑连接在同一局域网下;
			<br />
			2.在【资源库】打开“PICO 企业应用套件" <br />
			3.在 PICO企业应用套件主界面配置相关参数。 <br />* 完成以上3步，仍无法发现设备，可联系客服解决问题。
		</div>
	);
	return (
		<Modal_edit title="手动关联设备" width={800} isModalOpen={isModalOpen} handleOk={handleOk}>
			<div className="mt-50px">
				<Popover placement="bottomLeft" title={"添加设备前，请完成以下3步操作:"} content={content}>
					<p className="c-#5864FF ml-25px">设备不在列表？</p>
				</Popover>
				<div className="mt-5px">
					<ConfigProvider>
						<ProTable
							columns={columns}
							actionRef={actionRef}
							request={async (params, sort, filter) => {
								let { data } = await list_device({
									page: params.current,
									limit: params.pageSize,
									status: 1,
								});
								data.data.forEach((item: any, index: number) => (item.key = index + 1));
								return {
									data: data.data,
									success: true,
									total: data.total,
								};
							}}
							rowKey="key"
							rowSelection={{
								type: "radio",
								onSelect: record => {
									console.log(record);
									set_radio_value(record.device_sn);
								},
							}}
							tableAlertRender={false}
							search={false}
							options={false}
							pagination={{
								pageSize: 100,
								hideOnSinglePage: true,
							}}
							dateFormatter="string"
						/>
					</ConfigProvider>
				</div>
			</div>
		</Modal_edit>
	);
}
